<template>
  <div id="container" class="box">
    <div id="cesiumContainer">
      <div class="modelMenu">
        <div
          v-for="(item, index) in modelList"
          :key="index"
          class="modelItem"
          @click="changeModels(item.url)"
        >
          {{ item.title }}
        </div>
      </div>
      <button @click="show">轨迹</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "travel1",
  data() {
    return {
      url: "http://localhost:3000/models/CesiumAir/Cesium_Air.glb",
      modelList: [
        {
          title: "CesiumAir",
          url: "http://localhost:3000/models/CesiumAir/Cesium_Air.glb",
        },
        {
          title: "CesiumBalloon",
          url: "http://localhost:3000/models/CesiumBalloon/CesiumBalloon.glb",
        },
        {
          title: "CesiumMan",
          url: "http://localhost:3000/models/CesiumMan/Cesium_Man.glb",
        },
        {
          title: "CesiumMilkTruck",
          url: "http://localhost:3000/models/CesiumMilkTruck/CesiumMilkTruck.glb",
        },
        {
          title: "GroundVehicle",
          url: "http://localhost:3000/models/GroundVehicle/GroundVehicle.glb",
        },
        {
          title: "Pawns",
          url: "http://localhost:3000/models/Pawns/Pawns.glb",
        },
        {
          title: "ShadowTester",
          url: "http://localhost:3000/models/ShadowTester/Shadow_Tester.glb",
        },
        {
          title: "WoodTower",
          url: "http://localhost:3000/models/WoodTower/Wood_Tower.glb",
        },
      ],
      Cesium: "",
      view: "",
      czml: [],
      dataSourcePromise: "",
      i: "",
      a: "",
      data: [],
      start: "",
      stop: null,
      viewer: "",
    };
  },
  mounted() {
    this.Cesium = this.cesium;
    this.view = new this.Cesium.Viewer("cesiumContainer", {
      baseLayerPicker: false,
      timeline: true,
      homeButton: false,
      fullscreenButton: false,
      infoBox: false,
      sceneModePicker: false,
      navigationInstructionsInitiallyVisible: false,
      navigationHelpButton: false,
      shouldAnimate: true,
      imageryProvider: new this.Cesium.UrlTemplateImageryProvider({
        url: "http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
        // url:"http://localhost:3000/odm_orthophoto_titles/odm_orthophoto.original/{z}/{x}/{y}.png"
      }),
    });

    this.data[0] = [
      { longitude: 116.405419, dimension: 39.918034, height: 0, time: 0 },
      { longitude: 116.2821, dimension: 39.918145, height: 100, time: 40 },
      { longitude: 115.497402, dimension: 39.344641, height: 70000, time: 100 },
      { longitude: 107.942392, dimension: 29.559967, height: 70000, time: 280 },
      { longitude: 106.549265, dimension: 29.559967, height: 0, time: 360 },
    ];
    this.data[1] = [
      { longitude: 116.405419, dimension: 39.918034, height: 0, time: 0 },
      { longitude: 117.034586, dimension: 39.881202, height: 0, time: 40 },
      { longitude: 116.340088, dimension: 38.842224, height: 70000, time: 100 },
      { longitude: 113.489176, dimension: 23.464017, height: 70000, time: 280 },
      { longitude: 113.262084, dimension: 23.13901, height: 0, time: 360 },
    ];
    this.data[2] = [
      { longitude: 118.838979, dimension: 32.073514, height: 0, time: 0 },
      { longitude: 118.438838, dimension: 32.03777, height: 0, time: 40 },
      { longitude: 117.802406, dimension: 31.91231, height: 70000, time: 100 },
      { longitude: 104.043645, dimension: 35.993845, height: 70000, time: 280 },
      { longitude: 101.807224, dimension: -36.660972, height: 0, time: 360 },
    ];

    this.start = this.Cesium.JulianDate.fromDate(new Date(2017, 7, 11));
    // 结束时间
    this.stop = this.Cesium.JulianDate.addSeconds(
      this.start,
      100000,
      new this.Cesium.JulianDate()
    );

    this.view.scene.globe.enableLighting = true;
    this.init();
  },
  methods: {
    changeModels(url) {
      this.url = url;
      this.init();
    },
    init() {
      let Cesium = this.Cesium;
      var viewer = this.view;
      //地图源换成高德

      this.createModel(this.url, 10000, viewer, Cesium);

      viewer._cesiumWidget._creditContainer.style.display = "none"; // 隐藏版权
    },
    createModel(url, height, viewer, Cesium) {
      var position = Cesium.Cartesian3.fromDegrees(
        119.36978014013846,
        32.36050917346674,
        height
      );
      var heading = Cesium.Math.toRadians(135);
      var pitch = 0;
      var roll = 0;
      var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
      var orientation = Cesium.Transforms.headingPitchRollQuaternion(
        position,
        hpr
      );
      var entity = viewer.entities.add({
        name: url,
        position: position,
        orientation: orientation,
        model: {
          uri: url,
          minimumPixelSize: 128,
          maximumScale: 20000,
        },
      });
      viewer.trackedEntity = entity;
      // viewer.carema.lookAt(entity)
    },
    show() {
      let Cesium = this.Cesium;
      let view = this.view;

      let start = this.start;
      let stop = this.stop;

      let data = this.data;
      view.clock.startTime = start.clone();
      // 设置时钟当前时间
      view.clock.currentTime = start.clone();
      // 设置始终停止时间
      view.clock.stopTime = stop.clone();
      // 时间速率，数字越大时间过的越快
      view.clock.multiplier = 10;
      // 时间轴
      view.timeline.zoomTo(start, stop);
      // 循环执行,即为2，到达终止时间，重新从起点时间开始
      view.clock.clockRange = Cesium.ClockRange.LOOP_STOP;

        var czml = [
        {
          id: "document",
          name: "CZML Path",
          version: "1.0",
          clock: {
            interval: "2012-08-04T10:00:00Z/2012-08-04T10:00:20Z",
            currentTime: "2012-08-04T10:00:00Z",
            multiplier: 10,
          },
        },
        {
          id: "path",
          name: "path with GPS flight data",
          description:
            "<p>Hang gliding flight log data from Daniel H. Friedman.<br>Icon created by Larisa Skosyrska from the Noun Project</p>",
          availability: "2012-08-04T10:00:00Z/2012-08-04T10:00:20Z",
          path: {
            material: {
              polylineOutline: {
                color: {
                  rgba: [255, 0, 255, 255],
                },
                outlineColor: {
                  rgba: [0, 255, 255, 255],
                },
                outlineWidth: 5,
              },
            },
            width: 8,
            leadTime: 10,
            resolution: 5,
          },
        //   billboard: {
        //     image:
        //       "",
        //     scale: 1.5,
        //     eyeOffset: {
        //       cartesian: [0.0, 0.0, -10.0],
        //     },
        //   },
          position: {
            epoch: "2012-08-04T10:00:00Z",
            cartographicDegrees: [
              0, 122.93797, 39.50935, 1776,
               10, 124.93822, 40.50918, 1773,
                20,126.9385, 41.50883, 1772,
            ],
          },
        },
      ];

      view.dataSources
        .add(Cesium.CzmlDataSource.load(czml))
        .then(function (ds) {
         // view.trackedEntity = ds.entities.getById("path");
        });

      function computeFlight(source, start) {
        // 取样位置 相当于一个集合

        let property = new Cesium.SampledPositionProperty();
        for (let i = 0; i < source.length; i++) {
          let time = Cesium.JulianDate.addSeconds(
            start,
            source[i].time,
            new Cesium.JulianDate()
          );
          let position = Cesium.Cartesian3.fromDegrees(
            source[i].longitude,
            source[i].dimension,
            source[i].height
          );
          // 添加位置，和时间对应
          property.addSample(time, position);
        }
        return property;
      }
      
     
      // view.camera.flyTo({
      //     destination:Cesium.Cartesian3.fromDegrees(116.405419,32.073514,20000)
      // })
      for (let j = 0; j < data.length; j++) {
        let property = computeFlight(data[j], start);

        //console.log(property)
        // 添加模型
        let planeModel = view.entities.add({
          // 和时间轴关联
          availability: new Cesium.TimeIntervalCollection([
            new Cesium.TimeInterval({
              start: start,
              stop: stop,
            }),
          ]),
          position: property,
          // 根据所提供的速度计算模型的朝向
          orientation: new Cesium.VelocityOrientationProperty(property),
          // 模型数据
          model: {
            uri: "http://localhost:3000/models/CesiumAir/Cesium_Air.glb",
            minimumPixelSize: 128,
          },
        });
      }

      
    },
  },
};
</script>

<style lang='scss' scoped>
html,
body,
#cesiumContainer {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
}

.modelMenu {
  position: absolute;
  left: 20px;
  top: 20px;
  width: 100px;
  text-align: center;
  height: 500px;
  z-index: 99;
  color: aqua;
  font-weight: bold;
  font-size: 18px;
  line-height: 40px;
  text-align: center;
}

.modelItem {
  cursor: pointer;
}
</style>
